<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>h5</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="css/css.css">

</head>
<body>
    <div class="page-group" id="ss">
        <div class="bg">
            <embed width="100%" height="100%" src="img/bg.swf"></embed>
        </div>
        <!--性别-->
        <div class="page page-current" id="page-index-1">

            <!--<a href="#page-index-2">内联</a>-->

            <!--<a href="test.html">test页面</a>-->
            <!--<a href="over.html">over</a>-->
            <!--<button>性别</button>-->
            <div class="box-moadal box-modal-sex">


                <div class="male-animate">
                    <img src="img/male-bg-female.png" class="male-bg-sex male-bg-female">
                    <img src="img/male-bg-male.png" class="male-bg-sex male-bg-male">
                    <img src="img/male-icon-female.png" class="male-icon male-icon-female">
                    <img src="img/male-icon-male.png" class="male-icon male-icon-male">
                    <img src="img/male.svg" class="male">
                </div>
                <div class="fn-box">
                    <p class="choice-text"><img src="img/arrow.png">选择性别</p>
                    <div class="button-bg"><a class="step-a" href="#page-index-2">NEXT</a></div>
                </div>
            </div>

        </div>
        <!--年龄段-->
        <div class="page" id="page-index-2">
            <div class="box-moadal box-modal-age">
                <div class="age-animate">
                    <img src="img/age-bg.png" class="age-bg">
                    <div class="age-content">
                        <!-- Slider -->
                        <div class="swiper-container swiper-container-horizontal">
                            <div class="swiper-wrapper" style="transform: translate3d(-1310px, 0px, 0px); transition-duration: 0ms;">

                                <div class="swiper-slide" data-swiper-slide-index="0" >70<br/>后</div>
                                <div class="swiper-slide" data-swiper-slide-index="1" >80<br/>后</div>
                                <div class="swiper-slide" data-swiper-slide-index="2" >90<br/>后</div>
                                <div class="swiper-slide" data-swiper-slide-index="3" >00<br/>后</div>
                            </div>

                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                    </div>
                </div>
                <div class="fn-box">
                    <p class="choice-text">选择年龄</p>
                    <div class="button-bg"><a class="step-a" href="#page-index-3">NEXT</a></div>
                </div>
            </div>
        </div>
        <!--怎么玩-->
        <div class="page" id="page-index-3">
            <div class="box-moadal box-modal-play">
                <div class="play-animate">
                    <img src="img/howplay.png" class="howplay">
                    <div class="play-content">
                        <h6>怎么玩</h6>
                        <p class="">选择与您最符合的选项</p>
                        <ul>
                            <li>选项一</li>
                            <li>选项二</li>
                        </ul>
                        <div class="">
                            <p></p>
                            <a href="">保密及使用范围限制条款</a>
                        </div>
                    </div>
                </div>
                <div class="fn-box">

                    <div class="button-bg"><a class="step-a" href="test.html">START</a></div>
                </div>
            </div>
        </div>

    </div>

    <!--<script src="js/light7.js"></script>-->
    <!--<script src="js/light7-swiper.min.js"></script>-->
    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>

    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js"></script>-->
    <!--<script src="js/svg-morpheus.js"></script>-->
    <script src="js/jquery.1.11.3.min.js"></script>
    <script src="js/jquery.rotate.min.js"></script>
    <script src="js/swiper.min.js"></script>
    <script>
        jQuery.noConflict();
        jQuery(document).ready(function () {
            $.init();


            //表单默认值
            var person = {
                sex:'female',
                age:''
            };
            //动画

            //sex
            var male = jQuery('.male'),maleIcon = jQuery('.male-icon'),maleBg = jQuery('.male-bg');
            var rotate_angle = 0;
            var sex_count = 2;
            jQuery(male).rotate({
                bind:
                    {
                        click: function() {
                            rotate_angle += 180;

                            sex_count++;
                            jQuery(this).rotate({animateTo: rotate_angle});

                            if(sex_count%2 == 0){
                                jQuery('.male-icon-male').rotate({animateTo:0});
                                jQuery('.male-icon-male').hide().siblings('.male-bg-male').hide();
                                jQuery('.male-icon-female').show().siblings('.male-bg-female').show();
                                jQuery('.male-icon-female').rotate({animateTo:0});

                                person.sex = 'female';
                            }else{
                                jQuery('.male-icon-female').rotate({animateTo:-90});
                                jQuery('.male-icon-female').hide().siblings('.male-bg-female').hide();
                                jQuery('.male-icon-male').show().siblings('.male-bg-male').show();
                                jQuery('.male-icon-male').rotate({animateTo:90});


                                person.sex = 'male';
                            };


                        }
                    }

            });

            //age

            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev',
                slidesPerView: 1,
                paginationClickable: true,
//                spaceBetween: 30,
                loop: true
            });

            //'swiper-slide-active'获取data-swiper-slide-index
            var ageChoice = jQuery('swiper-slide-active').attr('data-swiper-slide-index');




        });








    </script>
</body>
</html>



